
import React,{ Component} from 'react';
import { Table, Icon, Divider } from 'antd';

const dataSource = [{
    key: '1',
    name: '碗碗香',
    age: 22,
    woId: 53957,
    address: '北京市',
    render: text=> <a href="#">{ text }</a>
},{
    key: '2',
    name: '小小',
    age: 18,
    woId: 53983,
    address: '深圳市'
},{
    key: '3',
    name: '天使里',
    age: 35,
    woId: 53955,
    address: '天晶石',
},{
    key: '4',
    name: '123',
    age: 45,
    woId: 53954,
    address: '天晶石',
}];
//text 代表在这项，a标签作用在这项上
//record 代表一个对象

const columns = [{
    title: '编号',
    dataIndex: 'woId',
    key: 'woId',
    sorter: (a, b) => {
        return a.woId - b.woId;
    },
    render: text=><a href="#">{ text }</a>
},{
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    render: text=><a href="#">{ text }</a>
},{
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    //默认的升序还是降序
    //defaultSortOrder: 'descend',
    //展示升序、降序、升序和降序的箭头,默认都有
    //sortDirections: ['ascend','descend'],
    sorter: (a, b) => {
        console.log('a',typeof a.age);
        console.log('b',typeof b.age);
        return a.age - b.age;
    },
    render: text=><a href="#">{ text }</a>
},{
    title: '地址',
    dataIndex: 'address',
    key: 'address',
},{
    title: '动作',
    dataIndex: 'action',
    key: 'action',
    render: (text,record)=> (
        <span>
            <a href="#">aaa-{ record.address } </a>
            <Divider type="vertical" />
            <a href="#">删除</a>
            <Divider type="vertical" />
            <a href="#" className="ant-dropdown-link">
                More actions <Icon type="down" />
            </a>
        </span>
    ),
}]


class Tab extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    render() {
        return(
            <div>
                <Table  columns={ columns } dataSource={ dataSource} />
            </div>
        )
    }
}
export default Tab